<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#box{width:220px;height:300px;transform-style:preserve-3d;transition:1.5s; perspective:400; margin: 150px auto}
#box .front{width:100%; height:100%;backface-visibility:hidden;}
#box .front img{width:100%; height:100%;}
#box .back{transform:rotateY(180deg);background:orange;width:220px;height:300px;position:absolute;backface-visibility:hidden; left:0px; top:0px;}
#box .back h4{color:white;text-align:center; font-size:30px;}
#box:hover {transform:rotateY(180deg);}

</style>
</head>

<body>

<div id="box">
	<div class="front"><img src="img1.jpg" /></div>
    <div class="back"><h4>ChenJiang</h4></div>
</div>

</body>
</html>
